<template>
  <div>
    <br>
    <el-row>
      <el-col :span="3">
        <template>
          <el-select v-model="saleOrderVo.depotId" placeholder="请选择仓库编号" clearable filterable>
            <el-option v-for="depot in depotList" :key="depot.id" :label="depot.id" :value="depot.id">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="8">
        <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" @change="selectTime()" value-format="yyyy-MM-dd" :clearable="true">
        </el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-select v-model="saleOrderVo.sno" filterable placeholder="请选择选货单编号" clearable>
          <el-option v-for="item in snoList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="saleOrderVo.state" filterable placeholder="请选择选货单状态" clearable>
          <el-option v-for="item in stateList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="showInfo()">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="exportTable()" icon="el-icon-upload">导出当前页</el-button>
      </el-col>
    </el-row>
    <br>

    <!-- 表格数据 -->
    <el-row>
      <template>
        <el-table :data="saleOrderList" tooltip-effect="dark" style="width: 95%" class="table1">
          <el-table-column type="expand" width="20">
            <template slot-scope="scope">
              <el-table :data="scope.row.orderItems" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange" ref="multipleTable">
                <el-table-column type="selection" width="55" v-if="(scope.row.state == '未提交'
                  || scope.row.state == '审核不通过')"></el-table-column>
                <el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
                <el-table-column prop="goodsName" align="center" label="产品名称" width="200"></el-table-column>
                <el-table-column prop="goodsNumber" align="center" label="产品编号" width="200"></el-table-column>
                <el-table-column prop="categoryType" align="center" label="品类" width="100"></el-table-column>
                <el-table-column prop="meteriType" align="center" label="物料" width="100"></el-table-column>
                <el-table-column prop="purity" align="center" label="成色" width="100"></el-table-column>
                <el-table-column prop="weight" align="center" label="重量(g)" width="100"></el-table-column>
                <el-table-column prop="count" align="center" label="数量" width="100"></el-table-column>
                <el-table-column prop="unitPrice" align="center" label="单价(g/元)" width="150"></el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="序号" width="60" align="center" type="index">
          </el-table-column>
          <el-table-column prop="id" label="id" width="40" align="center">
          </el-table-column>
          <el-table-column prop="sno" label="选货单编号" width="200" align="center">
          </el-table-column>
          <el-table-column prop="depotId" label="仓库" width="70" align="center">
          </el-table-column>
          <el-table-column prop="customer" label="客户" width="150" align="center">
          </el-table-column>
          <el-table-column prop="state" label="状态" width="110" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="制单时间" width="150" align="center">
          </el-table-column>
          <el-table-column prop="totalPrice" label="总价(元)" width="150" align="center">
          </el-table-column>
          <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
<<<<<<< HEAD
              <el-button type="success" size="mini" v-if="scope.row.state == '未提交' || scope.row.state == '审核不通过'" 
=======
              <el-button type="success" size="mini" v-if="scope.row.state == '未提交'"
>>>>>>> 7ed695747f2f61f03e4c07e7b29318cf6ab7d85a
                @click="sunmitSaleOrder(scope.row)">提交</el-button>
              <el-button type="warning" size="mini" v-if="(scope.row.state == '未提交' || scope.row.state == '审核不通过')"
                @click="updateSaleOrder(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" v-if="(scope.row.state == '未提交' || scope.row.state == '审核不通过')"
                @click="delSaleOrder(scope.row)">删除</el-button>
              <el-button type="success" size="mini" v-if="scope.row.state == '待审核'
                && (role == 'manager' || (role.endsWith('m') || role.endsWith('x')))" @click="passSaleOrder(scope.row)">
                通过</el-button>
              <el-button type="danger" size="mini" v-if="scope.row.state == '待审核'
                && (role == 'manager' || (role.endsWith('m') || role.endsWith('x')))" @click="noPassSaleOrder(scope.row)">
                不通过</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-row>

    <!-- 修改框 -->
    <el-dialog title="修改列表" :visible.sync="dialogFormVisible">
      <template>
        <el-table :data="multipleSelection" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="goodsNumber" align="center" label="产品编号" width="150"></el-table-column>
          <el-table-column prop="goodsName" align="center" label="产品名称" width="150"></el-table-column>
          <el-table-column align="center" label="修改数量" width="150">
            <template slot-scope="scope">
              <el-input v-model.number="quantity[scope.$index]"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmUpdate()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <el-row>
      <template>
        <div class="block">
          <!--total:总条数 -->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
            :page-sizes="[10, 20, 30, 40]" :page-size="size" layout="prev, pager, next, jumper, sizes, total"
            :total="total">
          </el-pagination>
        </div>
      </template>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 这里放数据
      stateList: [
        { id: -1, name: "审核不通过" },
        { id: 0, name: "未提交" },
        { id: 1, name: "待审核" },
        { id: 2, name: "审核通过" },
        { id: 3, name: "已付定金" },
        { id: 4, name: "已打包" },
        { id: 5, name: "已完成" },],
      snoList: [],
      time: [],
      current: 1,
      size: 10,
      total: 0,
      state: "",
      saleOrderList: [],
      depotList: [],
      saleOrderVo: {
        depotId: "",
        startTime: "",
        endTime: "",
        sno: "",
        state: "",
      },
      updateSaleOrderVo: {
        sno: "",
        state: "",
      },
      delSaleOrderVo: {
      },
      index: null,
      role: "",
      multipleSelection: [],
      dialogFormVisible: false,
      quantity: [],
      sid: 0,
    }
  },
  methods: {
    confirmUpdate: function () {
      let updateList = [];

      for (let i = 0; i < this.multipleSelection.length; i++) {
        var a = {
          goodsNumber: null,
          count: null,
        }
        this.multipleSelection[i].quantity = parseInt(this.quantity[i]);
        console.log(this.multipleSelection[i].quantity);
        a.goodsNumber = this.multipleSelection[i].goodsNumber;
        a.count = this.multipleSelection[i].quantity;
        updateList.push(a);
      }

      let data = {
        sid: this.sid,
        goodsList: updateList
      }
      console.log(data);

      this.$axios.post("saleOrder/updateSaleOrder", data).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功!");
        } else {
          this.$message.error("修改失败:" + res.data.message);
        }

        this.dialogFormVisible = false;
        this.getCurrentPageData();
      })

    },
    updateSaleOrder: function (scope) {
      this.sid = scope.id
      this.dialogFormVisible = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.quantity[i] = parseInt(this.multipleSelection[i].count)
      }
    },
    passSaleOrder: function (scope) {
      this.state = "2"
      this.checkSaleOrder(scope, this.state)
    },
    noPassSaleOrder: function (scope) {
      this.state = "-1"
      this.checkSaleOrder(scope, this.state)
    },
    checkSaleOrder: function (scope, state) {
      let data = {
        sno: scope.sno,
        state: state
      }
      this.$axios.post("saleOrder/check", data).then(res => {
        if (res.data.code == 200) {
          if (data.state == "2") {
            this.$message.success("选货单已通过!");
          } else {
            this.$message.success("选货单已否决!");
          }
          this.getCurrentPageData();
        } else {
          if (data.state == "2") {
            this.$message.error("选货单通过失败:" + res.data.message);
          } else {
            this.$message.error("选货单否决失败!" + res.data.message);
          }
          this.getCurrentPageData();
        }
      })
    },
    findAllDepot: function () {
      this.$axios.get("depot/listForInStock").then(res => {
        console.log(res.data.data);
        this.depotList = res.data.data;
      })
    },
    download: function (data, fileName) {
      if (!data) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName)

      document.body.appendChild(link)
      link.click()
    },
    exportTable: function () {
      this.$axios.post("saleOrder/exportSaleOrder", this.saleOrderVo, { responseType: 'blob' }).then(res => {

        let exportFlag = res.headers['exportflag'];
        if (exportFlag == false) {
          this.$message.error("导出失败");
          return;
        }

        let contentDisposition = res.headers['content-disposition'];
        if (contentDisposition) {
          var fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1], "UTF-8");
          console.log(fileName);
        }
        this.download(res.data, fileName)
      })
    },
    findAccount: function () {
      this.$axios.get("/user/findUserByAccount/" + window.localStorage.getItem("account")).then(res => {
        console.log(res.data.data);
        // this.userAll = res.data.data;
        this.role = res.data.data.roleList[0].name;
        console.log(this.role);
      });
    },
    delSaleOrder: function (scope) {
      this.delSaleOrderVo.sno = scope.sno;
      this.delSaleOrderVo.state = scope.state;
      console.log(this.delSaleOrderVo);
      this.$axios.post("saleOrder/del", this.delSaleOrderVo).then(res => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.getCurrentPageData();
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    sunmitSaleOrder: function (scope) {
      this.$confirm('一经提交不可更改,确定提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateSaleOrderVo.state = "1";
        this.updateSaleOrderVo.sno = scope.sno;
        console.log(this.updateSaleOrderVo);
        this.$axios.post("saleOrder/updateState", this.updateSaleOrderVo).then(res => {
          if (res.data.code == 200) {
            this.$message.success("提交成功");
            this.getCurrentPageData();
          } else {
            this.$message.error("提交失败:" + res.data.message);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消提交'
        });
      });
    },
    handleSizeChange(val) {
      //页面大小修改时触发
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getCurrentPageData();
    },
    handleCurrentChange(val) {
      //页码修改时触发
      console.log(`当前页: ${val}`);
      //给当前页属性赋值
      this.current = val;
      //发请求获取数据
      this.getCurrentPageData();
    },
    getCurrentPageData: function () {
      this.showInfo()
    },
    findAllSno: function () {
      this.$axios.get("saleOrder/findAllSno").then(res => {
        if (res.data.code == 200) {
          this.snoList = res.data.data;
          console.log(res.data.data);
        }
      })
    },
    selectTime: function () {
      if (!this.time) {
        this.time = []
      }
      console.log(this.time);
      this.saleOrderVo.startTime = this.time[0];
      this.saleOrderVo.endTime = this.time[1];
    },
    showInfo: function () {
      this.saleOrderVo.current = this.current;
      this.saleOrderVo.size = this.size;
      this.$axios.post("saleOrder/info", this.saleOrderVo).then(res => {
        console.log(res.data);
        this.saleOrderList = res.data.data.data;
        this.total = res.data.data.total;
        this.size = res.data.data.size;
      })
    }
  },
  mounted: function () {
    //查询所有depot_id
    this.findAllSno();
    this.showInfo();
    this.findAccount();
    this.findAllDepot();
  }
}
</script>

<style scoped>

.block {
  text-align: center;
}

.table1,.table1 th,.table1 td{
  border: 0.5px solid rgb(218, 151, 220);
}

.table1{
  margin-left: 20px;
}
</style>